import React from "react";
import axios from "axios";
class List extends React.Component {
    constructor(){
        super();
        this.state={
            firstPage:true,
            loading:false,
            users:null,
            error:null,
        }

    }
    componentWillReceiveProps(nextProps){
       let userName = nextProps.value;
       this.setState({
           firstPage:false,
           loading:true
       })
       axios.get(`https://api.github.com/search/users?q=${userName}`).then((response)=>{
           let users = response.data.items;
           this.setState({
               loading:false,
               users:users
           })    
       }).catch((err)=>{
           this.setState({
               loading:false,
               error:err
           })
       })
    }
    render() {
        let {firstPage,loading,users,error} = this.state;
        if(firstPage){
            return <h2>请输入要查询的内容</h2>
        }else if(loading){
            return <h2>loading------</h2>
        }else if(users){
            return(
                users.map((item,index)=>{
                    return(
                        <div className="card" key={index}>
                           <a href={item.html_url} target="_blank">
                               <img src={item.avatar_url} style={{ width: "100px" }} />
                           </a>
                           <p className="card-text">{item.login}</p>
                       </div>
                    )
                })
            )
        }else{
            return <h2>所查询的信息有误,请重新输入</h2>
        }
    }
}
export default List;